<template>
	<div>
		
		
		<Row  style="text-align: left;margin-top: 41px;">
			<Col span="10" >
				<span style="border-left: 5px solid #517EDB;font-size: 14px;"></span>
			<span style="font-size: 18px;margin-left: 10px;">自动短信</span>
		 	</Col> 
	        <Col v-if="display" span="13" style="text-align: right;font-size: 16px;">
	        	<Tooltip content="新增短信" theme="light" placement="top-end">
	        		<Button  @click="display=false" type="success" size="small"><i class="iconfont alicon-add1"></i></Button>
	        	</Tooltip>
	        </Col> 
	    </Row>
		<div v-if="display">
			<div  style="min-height: 300px;">
				<Row style="margin:0 auto;margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:5px;color: #666666;border-radius: 12px;background-color: #f0f8ff;">
					<Col span="1" style="text-align: center;">
						<!--<span style="font-size: 16px;"></span>
						<CheckboxGroup >
					        <Checkbox label=""></Checkbox>
					    </CheckboxGroup>-->
					    &nbsp;
					</Col>
			        <Col span="5" style="text-align: center;">
						<span style="font-size: 16px;">短信内容</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">发送时间</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">发送时机</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">发送条数</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">发送对象</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">状态</span>
					</Col>
					<Col span="3" style="text-align: center;">
						<span style="font-size: 16px;">操作</span>
					</Col>
					
					
				</Row>
				<Row  class="hoverclass"  v-for="item in messageList" :key="item.id" style="margin:0 auto;color: #666666;margin: 5px 20px 5px 20px;padding:5px 0px 5px 0px;border-bottom: 1px solid rgb(240, 248, 255);">
			        <div  style="cursor: pointer;">
			        	<Col span="1" style="text-align: center;">
							<CheckboxGroup >
						        <Checkbox label=""></Checkbox>
						    </CheckboxGroup>
						</Col>
				        <Col span="5" style="text-align: center;">
							<span style="font-size: 14px;">{{item.message}}&nbsp;</span>
						</Col>
						<Col span="3" style="text-align: center;">
							<span style="font-size: 14px;">{{item.sendDate}}|{{item.sendTime}}&nbsp;</span>
						</Col>
						<Col span="3" style="text-align: center;">
							<span style="font-size: 14px;">{{item.sendOpportunity}}&nbsp;</span>
						</Col>
						<Col span="3" style="text-align: center;">
							<span style="font-size: 14px;">{{item.sendNumber}}&nbsp;</span>
						</Col>
						<Col span="3" style="text-align: center;">
							<span style="font-size: 14px;">{{item.sendTo}}&nbsp;</span>
						</Col>
						<Col span="3" style="text-align: center;">
							<span style="font-size: 14px;">{{item.sendQuantity}}&nbsp;</span>
						</Col>
						<Col span="3" style="text-align: center;">
							<span style="font-size: 14px;color:#57a3f3 ;">
								<span @click="display=false">编辑</span>
								<span style="margin-left: 10px;">删除</span>
							</span>
						</Col>
						
					</div>
				</Row>
		    </div>
		</div>
		<div v-if="!display" style="z-index: 1000;float: left;width: 850px;height: 550px;background-color: white;border-radius: 15px;margin: 20px 0px 0px 40px;">
			<Row >
				<Col span="18" style="text-align: left;height:550px;border: 1px solid #e9eaec;padding: 20px;border-top-left-radius: 15px;border-bottom-left-radius: 15px;">
	    			<span style="font-size: 15px;margin-top: 10px;">短信内容:</span>
					<Input style="margin-top: 10px;"  type="textarea" :autosize="{minRows: 3,maxRows: 3}" placeholder="请输入内容..."></Input>
					<span style="font-size: 15px;margin-top: 10px;display: block;">发送时间:</span>
					<CheckboxGroup style="margin-top: 10px;">
				        <Checkbox label="周一"></Checkbox>
				        <Checkbox label="周二"></Checkbox>
				        <Checkbox label="周三"></Checkbox>
				        <Checkbox label="周四"></Checkbox>
				        <Checkbox label="周五"></Checkbox>
				        <Checkbox label="周六"></Checkbox>
				        <Checkbox label="周日"></Checkbox>
				    </CheckboxGroup>
				    <Row style="margin-top: 10px;">
				    	<Col span="14">
						    <Select  style="width:110px;display: inline-block;">
						        <Option v-for="item in timeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						    </Select>
					   
						    <span style="font-size: 15px;display: inline-block;">—</span>
					    
						    <Select  style="width:110px;display: inline-block;">
						        <Option v-for="item in timeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						    </Select>
					    </Col>
					</Row >
					<span style="font-size: 15px;margin-top: 10px;display: block;">发送条数:</span>
					<Select  style="width:110px;display: inline-block;margin-top: 10px;">
				        <Option v-for="item in sendList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
				    <span style="font-size: 15px;margin-top: 10px;display: block;">发送时机:</span>
					<Select  style="width:110px;display: inline-block;margin-top: 10px;">
				        <Option v-for="item in sendList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
				    <!--<span style="font-size: 15px;margin-top: 10px;display: block;">发送对象:</span>
					<Select  style="width:110px;display: inline-block;margin-top: 10px;">
				        <Option v-for="item in sendList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>-->
				    <!--<div style="width:100%;height:1px;border-bottom: 1px solid #e9eaec;margin:10px 0px;"></div>-->
				    <Row  style="line-height: 38px;position: absolute;bottom: 10px;width: 100%;margin-left: -10px;">
						<div style="padding: 10px;width: 100%;">
							<div style="width:100%;height:1px;border-bottom: 1px solid #e9eaec;"></div>
						</div>
	    				<Col span="6" style="text-align: center;">
							<Button  @click="display=true"  style="width: 105px;">取消</Button>
					    </Col>
			        	<Col span="6" style="text-align: center;">
				            <Button  type="primary" style="width: 105px;">发送</Button>
					    </Col>
					</Row>
					
	    		</Col>
				<Col span="6" style="text-align: left;height:550px;border: 1px solid #e9eaec;background-color: rgba(247,247,247,0.3);border-top-right-radius: 15px;border-bottom-right-radius: 15px;">
					<div style="height: 40px;padding-top:10px;width: 100%;background-color: #f7f7f7;border-top-right-radius: 15px;text-align: center;">
						<div style="font-size: 16px;color: #517edb;">发送对象</div>
					</div>
	        		<Tree style="margin-left: 30px;" :data="data2" show-checkbox></Tree>
		       </Col>
			</Row >
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				display:true,
				messageList:[
					{id:"1",message:"您有新的成绩查询",sendDate:"周一至周日",sendTime:"8:00-18:00",sendOpportunity:"绩效生成时",sendNumber:"10",sendQuantity:"启用",sendTo:"初一、初二",},
					{id:"2",message:"您有新的成绩查询",sendDate:"周一至周日",sendTime:"8:00-18:00",sendOpportunity:"绩效生成时",sendNumber:"10",sendQuantity:"停用",sendTo:"初一、初二",}
				],
				data2: [
                    {
                        title: '全部',
                        expand: true,
                        children: [
                            {
                                title: '初一',
                                expand: true,
                                children: [
                                    {
                                        title: '张三'
                                    },
                                    {
                                        title: '李四'
                                    }
                                ]
                            },
                            {
                                title: '初二',
                                expand: true,
                                children: [
                                    {
                                        title: '王五'
                                    },
                                    {
                                        title: '赵六'
                                    }
                                ]
                            }
                        ]
                    }
                ],
                timeList:[
                	{
                        value: '18:00',
                        label: '18:00'
                    },
                    {
                        value: '19:00',
                        label: '19:00'
                    },
                ],
                sendList:[
                	{
                        value: '1',
                        label: '1'
                    },
                    {
                        value: '2',
                        label: '2'
                    },
                ],
			}
		}
	}
</script>

<style>
</style>